<template>
	<view class="content">
		<!--我的租期-->
		<view class="content_1">
			<view>
				<view class="title_view">
					<view class="title">我的租期</view>
					<view class="title_line"></view>
				</view>
				<block v-for="(item_order, index_order) in orderList" :key='index_order'>
					<view class="house_view" @click.stop="chooseOrder(item_order.id, index_order)">
						<view class="view_left">
							<image class="houseimg" @click.stop="checkOrderBill(index_order)" :src="item_order.receipt_img_url"></image>
							<view class="housedetail">
								<view class="housetitle">{{item_order.house_name}}丨{{item_order.house_room_name}}</view>
								<view class="housetime">缴费日期：2020/12/09</view>
								<view class="housemoney">¥{{item_order.stay_money}}</view>
							</view>
						</view>
						<view class="view_right_cancel" v-if="orderId.indexOf(item_order.id) != -1">
							取消
						</view>
						<view class="view_right_choose" v-else>
							选择
						</view>
					</view>
				</block>
			</view>
		</view>
		<!--底部提交按钮-->
		<view class="content_2" v-if="false">
			<!-- <view class="submit" @click="toSubmit">提交</view> -->
			<view class="submit" @click="toPayRenewOrder">去支付</view>
		</view>
		<!--分割线-->
		<!-- <view class="line"></view> -->
		<!--我的家用-->
		<!-- <view class="content_1">
			<view class="title_view">
				<view class="title">我的家用</view>
				<view class="title_line"></view>
			</view>
			<view class="house_view">
				<view class="view_left">
					<view class="houseimg"></view>
					<view class="housedetail">
						<view class="housetitle">鸿顺园西区丨2居室-02卧</view>
						<view class="housetime">缴费日期：2020/12/09</view>
						<view class="housemoney">¥2000.00</view>
					</view>
				</view>
				<view class="view_right">
					取消
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let seach_number = 3
	let page = 3
	export default {
		data() {
			return {
				orderList: [],
				//订单id
				orderId: [],
				//订单选择状态
				chooseState: '0',
				//传递给后台的order_id字符串
				order_id: '',
			}
		},
		methods: {
			// 预览图片
			checkOrderBill: function(index) {
				let arr = new Array();
				arr.push(this.orderList[index].receipt_img_url);
				uni.previewImage({
					urls: arr,
				});
			},
			//上拉加载(筛选前)
			loadMore: function() {
				if (page > this.orderList.length) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						position: 'center'
					})
				} else {
					new Request('Get_Customer_Continue/GetCustomerContinueList').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								seach_number: seach_number,
								page: page,
								openid: app.globalData.openid,
							}
						},
						(res) => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '没有更多数据了',
									position: 'center',
									icon: 'none'
								})
							} else {
								page += seach_number
								this.orderList = this.orderList.concat(res.data.data)
								console.log(this.orderList)
							}
						}
					)
				}
			},
			//选择订单
			chooseOrder:function (order_id, id) {
				//跳转到支付订单详情页面
				uni.navigateTo({
					url: '/pages/mine/rentorder_paydetail/paydetail?order_id=' + order_id,
				})
				return;
				//判断orderId数组中是否已有相应id(indexOf),没有则加入
				if (this.orderId.indexOf(order_id) == -1) {
					this.orderId.push(order_id)
					this.order_id = this.orderId.join(',')
					console.log(this.order_id)
					this.chooseState = id
				} else {
					//有则indexOf其位置,将其删除
					this.orderId.splice(this.orderId.indexOf(order_id), 1)
					this.order_id = this.orderId.join(',')
					console.log(this.order_id)
					this.chooseState = id
				}
				
			},
			//点击提交订单,跳转代缴账单详细页面 
			//		备注：暂时不跳转订单详情页
			toSubmit:function () {
				console.log(this.order_id)
				if (this.order_id == '') {
					new Request().showToast('请选择账单','none',()=>{})
				} else {
					uni.navigateTo({
						url: '/pages/mine/orderpay'
					})
				}
			},
			//支付待缴费订单
			toPayRenewOrder: function(order_id) {
				if (this.order_id == '') {
					new Request().showToast('请选择账单','none',()=>{});
					return;
				}
				
				new Request('renew/Pay_Order/PayOrder').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							order_id: this.order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res) => {
						//判断
						if (res.data.code == 0) {
							new Request().showToast(res.data.msg);
							return;
						}
						//调用支付接口
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.reLaunch({
									url: '/pages/mine/mine',
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									position: 'center',
									title: '已取消支付',
									icon: 'none'
								})
							}
						});
					}
				);
			}
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad() {
			new Request('Get_Customer_Continue/GetCustomerContinueList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						seach_number: seach_number,
						page: page,
						openid: app.globalData.openid,
					}
				},
				(res) => {
					console.log(res)
					if (res.data.code == '1') {
						this.orderList = res.data.data
					} else {
						uni.showToast({
							title: '没有订单',
							icon: 'none',
							position: 'center'
						})
					}
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
	
	/*
		我的租期样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding: 0upx 40upx;
	}

	.title_view {
		height: 45upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title {
		height: 40upx;
		font-size: 28upx;
		line-height: 40upx;
		color: #333333;
	}

	.title_line {
		height: 4upx;
		width: 120upx;
		background-color: #B3E9DC;
	}

	.house_view {
		height: 180upx;
		background-color: #FFFFFF;
		margin-top: 30upx;
		border-radius: 10upx;
		display: flex;
	}

	.view_left {
		height: 180upx;
		width: 580upx;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
	}

	.view_right_cancel {
		height: 180upx;
		width: 80upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		background-color: #FFC26D;
		align-items: center;
		line-height: 180upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}
	
	.view_right_choose {
		height: 180upx;
		width: 80upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		background-color: #63D0D5;
		align-items: center;
		line-height: 180upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}

	.houseimg {
		height: 126upx;
		width: 230upx;
		background-color: #3F536E;
		margin-right: 20upx;
	}

	.housedetail {
		height: 126upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.housetitle {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #333333;
	}

	.housetime {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #666666;
	}

	.housemoney {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #666666;
	}

	/*
		分割线样式
	*/
	.line {
		margin: 40upx 0upx;
		height: 30upx;
		background-color: #FFFFFF;
	}
	
	/*
		底部提交按钮
	*/
	.content_2{
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		z-index: 999;
		width: 750upx;
		height: 100upx;
		background-color: #49453A;
	}
	
	.submit{
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
	}
</style>
